<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家入驻-扫码入驻</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
            type="text/javascript" charset="utf-8"></script>
    <!-- 引入 jquery.qrcode 插件 -->
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

    <style>
        /* 文字容器样式 */
        .text-content {
            font-size: 20px;
            margin-bottom: 30px; /* 增加与下方元素的距离 */
        }

        /* 二维码容器样式 */
        .qrcode-container {
            width: 200px; /* 调整二维码的宽度 */
            height: 200px; /* 调整二维码的高度 */
            display: flex;
            justify-content: center; /* 水平居中二维码 */
        }

        /* 调整.center-wrapper样式以确保内容居中 */
        .center-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            /* 以上四行代码则是用于使内容垂直居中 */
            text-align: center;
            /* 这行代码是使得文本在包裹元素内居中 */
        }
    </style>
</head>
<body>
<div class="center-wrapper">
    <div class="panel panel-default">
        <div class="text-content">请打开手机微信扫一扫</div>

        <div id="qrcode" class="qrcode-container"></div>
    </div>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--代码说明： 发送ajax请求到后端api生产图形验证码 -->

<script>
    var qrCodeToken;
    $(function () {
        outputQRCod(100, 100);　　　　　　　　　　//转换中文字符串
        function toUtf8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }

        //生成二维码
        function outputQRCod(width, height) {
            $.get("http://127.0.0.1:8080/merchant/generateQrCode", function (resp, status) {
                if (resp.code == 200) {
                    //先清空
                    $("#qrcode").empty();
                    //中文格式转换
                    var str = toUtf8(resp.data.url);
                    //生成二维码
                    $("#qrcode").qrcode({
                        render: "canvas",//canvas和table两种渲染方式
                        width: width,
                        height: height,
                        text: str
                    });
                    // 获取前端定时查询token
                    qrCodeToken = resp.data.qrCodeToken;
                }
            });
        }
    })
    getData();
    var int = self.setInterval("getData()", 3000);
    function getData() {
        if (qrCodeToken != null) {
            $.get("http://127.0.0.1:8080/merchant/getQrCodeTokenResult?qrCodeToken=" + qrCodeToken, function (resp, status) {
                if (resp.code == 200) {
                    alert("恭喜微信扫码成功，即将进入商家入驻页面")
                    window.location.href = "addMerchantQrCode.html?qrCodeToken="+ qrCodeToken;
                }
            });
        }
    }
</script>
</body>
</html>